import 'package:fl_chart/fl_chart.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:sleep/comp/card_back_ground.dart';
import 'package:sleep/comp/detail_chart.dart';
import 'package:sleep/comp/detail_header.dart';
import 'package:sleep/comp/fatigue_state_chart.dart';
import 'package:sleep/help_style.dart';
import 'package:sleep/page/fatigue/comp/detail_eyes.dart';
import 'package:sleep/config.dart';
import 'package:flutter/material.dart';
import 'package:sleep/page/fatigue/comp/heart_deatil.dart';
import 'package:sleep/provider/fagigue_state_provider.dart';
import 'package:sleep/provider/wave_deatil_provider/fatigue_detail_provider.dart';
import 'package:sleep/provider/wave_deatil_provider/pluse_detail_provider.dart';

class DetailPage extends ConsumerWidget {
  const DetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final heigh = MediaQuery.of(context).padding.top;
    final detial = ref.watch(fatigueDetailProvider);
    final pluse = ref.watch(pulseDetailProvider);
    final spots = ref.watch(fatigueStateProvider)?.fatigueSpot;
    return Scaffold(
      backgroundColor: HelpStyle.backgroundColor,
      body: Padding(
        padding: const EdgeInsets.only(left: 8.0, right: 8.0),
        child: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              delegate: DetailAppbar(
                  heigh + kBottomNavigationBarHeight, 'Detail', "-"),
              pinned: true,
            ),
            const SliverToBoxAdapter(child: SizedBox(height: 10)),
            const SliverToBoxAdapter(child: DetailEyes()),
            const SliverToBoxAdapter(child: SizedBox(height: 10)),
            const SliverToBoxAdapter(child: HeartDetail()),
            const SliverToBoxAdapter(child: SizedBox(height: 10)),
            SliverToBoxAdapter(
                child: chart('BF', 0, 60, 20, 0, detial.dfSpots)),
            SliverToBoxAdapter(child: chart('BD', 0, 4, 1, 0, detial.dbSpots)),
            SliverToBoxAdapter(
                child: chart('PERCLOS(%)', 0, 60, 20, 0, detial.preclosSpots)),
            SliverToBoxAdapter(
                child: chart('HRV', 0, 0.15, 0.05, 2, pluse.hrvSpots)),
            SliverToBoxAdapter(
                child: chart('BPM', 30, 150, 30, 0, pluse.bpmSpots)),
            SliverToBoxAdapter(child: fatiguesatechart(spots)),
            const SliverToBoxAdapter(child: SizedBox(height: 10)),
          ],
        ),
      ),
    );
  }

  Widget headerItem(_DeatilModel model) {
    return CustomPaint(
      painter: BackPainter(),
      child: Container(
        child: Column(
          children: [Text(model.title), Text(model.value)],
        ),
      ),
    );
  }

  Widget chart(String title, double minY, double maxY, double mimResolution,
      int fixed, List<FlSpot> spots) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
      padding: EdgeInsets.only(top: 12, left: 12, bottom: 12, right: 12),
      decoration: HelpStyle.decoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: HelpStyle.contextStyle,
          ),
          const SizedBox(height: 8),
          DetailChart(
              fixed: fixed,
              aspectRatio: 4,
              spots: spots,
              mimResolution: mimResolution,
              minX: 0,
              maxX: kDetialShowLengh.toDouble() - 1,
              maxY: maxY,
              minY: minY)
        ],
      ),
    );
  }

  Widget fatiguesatechart(List<List<FlSpot>>? spots) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
      padding: EdgeInsets.only(top: 12, left: 12, bottom: 12, right: 12),
      decoration: HelpStyle.decoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Fatigue State',
            style: HelpStyle.contextStyle,
          ),
          const SizedBox(height: 8),
          FatigueStateChart(
              aspectRatio: 4,
              spots: spots,
              mimResolution: 1,
              minX: 0,
              maxX: 2 * 60 * 60.toDouble(),
              maxY: 3,
              minY: 0)
        ],
      ),
    );
  }
}

class _DeatilModel {
  final String title;
  final String value;

  _DeatilModel(this.title, this.value);
}
